//账期申请
import { useState, useEffect } from 'react';
import { Button, Input, InputNumber, Form } from 'antd';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import '../../index.less';

const layout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 14 },
};

const { TextArea } = Input;

const ApplyBillPeriod = ({
  ApplyBillConfig,
  record,
  handleCancel,
  handleOk,
}) => {
  //   console.log('ApplyBillConfig', ApplyBillConfig, record);
  const { title, visible, type } = ApplyBillConfig;

  const [form] = Form.useForm();

  const [surplusMoney, setSurplusMoney] = useState('');

  const [loading, setLoading] = useState(false);

  useEffect(() => {
    form.resetFields();
    let val = 0;
    if (type == 'edit') {
      val = Number(record.lastAmount - record.noAuditDiscountAmount).toFixed(2);
    } else {
      val = record.lastAmount;
    }
    setSurplusMoney(val);
  }, [visible]);

  //优惠金额的改变
  const discountPayChange = (e) => {
    var reg = /^[0-9]+.?[0-9]*$/;
    let val = '';
    if (reg.test(e)) {
      val = e.toFixed(2);
    } else {
      val = 0;
    }
    //重新计算剩余应还金额
    let newSurplusMoney =
      record.lastAmount - val <= 0
        ? 0
        : Number(record.lastAmount - val).toFixed(2);
    setSurplusMoney(newSurplusMoney);
  };

  //提交
  const onOk = () => {
    form
      .validateFields()
      .then((value) => {
        handleOk(value);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  //取消
  const onCancel = () => {
    handleCancel();
  };

  return (
    <>
      <CommonModal
        title={title}
        visible={visible}
        footer={[
          <Button onClick={onCancel} key="cancel">
            取消
          </Button>,
          <Button onClick={onOk} key="confirm" type="primary">
            确定
          </Button>,
        ]}
        onCancel={onCancel}
        width={548}
      >
        <Form
          {...layout}
          form={form}
          name="apply-period"
        //   className="search-form-style"
          style={{ marginBottom: '16px' }}
          initialValues={{
            discountAmount: type == 'edit' ? record.noAuditDiscountAmount : '',
            remark: type == 'edit' ? record.remark : '',
          }}
        >
          <Form.Item label="优惠金额(元)">
            <div
              style={{
                display: 'flex',
                height: '26px',
                marginBottom: '30px',
              }}
            >
              <Form.Item
                style={{ width: '300px' }}
                name="discountAmount"
                rules={[
                  { required: true, message: '请输入优惠金额!' },
                  () => ({
                    validator(rule, value) {
                      if (value === 0) {
                        return Promise.reject('金额不能为0');
                      } else if (value && value > Number(record.lastAmount)) {
                        return Promise.reject('优惠金额不能大于出账金额');
                      }
                      return Promise.resolve();
                    },
                  }),
                ]}
              >
                <InputNumber
                  style={{ width: '140px' }}
                  placeholder="请输入优惠金额"
                  //   onBlur={discountPayChange}
                  onChange={discountPayChange}
                  parser={(value) => Number(value).toFixed(2)}
                  min={0}
                />
              </Form.Item>
              <span style={{ marginLeft: '8px' }}>
                （优惠后的剩余应还金额为
                <span className="common-color9">{surplusMoney}</span>元）
              </span>
            </div>
          </Form.Item>
          <Form.Item
            label="申请理由"
            name="remark"
            rules={[{ required: true, message: '请输入申请理由!' }]}
          >
            <TextArea
              placeholder="请输入申请理由"
              autoSize={{ minRows: 4, maxRows: 6 }}
              showCount
              maxLength={100}
            />
          </Form.Item>
        </Form>
        <CommonLoading loading={loading} />
      </CommonModal>
    </>
  );
};

export default ApplyBillPeriod;
